<template>
  <div>
    <el-dialog
      title="已存在的服务实例"
      :visible.sync="showExistInstanceDialog"
      width="60%"
      center
      :destroy-on-close="true"
    >
      <div style="height: 60vh">
        <div style="height: 56vh; overflow-y: scroll">
          <el-table
            :data="deployedInstanceByAppName"
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }"
            @select="select"
            ref="multipleTable"
          >
            <el-table-column type="selection"></el-table-column>
            <el-table-column
              property="appZhname"
              label="服务名称"
            ></el-table-column>
            <el-table-column
              property="appName"
              label="服务标识"
            ></el-table-column>
            <el-table-column
              property="deployName"
              label="部署名称"
            ></el-table-column>
            <el-table-column
              property="appVersion"
              label="服务版本"
            ></el-table-column>
            <el-table-column property="host" label="地址"></el-table-column>
            <el-table-column label="服务描述">
              <template slot-scope="scope">
                <el-tooltip
                  effect="dark"
                  :content="scope.row.appDescription"
                  placement="bottom-start"
                  popper-class="tooltipClass"
                >
                  <div class="descSpan">
                    {{ scope.row.appDescription }}
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div
          style="
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
          "
        >
          <div>
            <el-pagination
              background
              layout="total, prev, pager, next, jumper"
              :total="page.total"
              :page-size="page.pageSize"
              :page.sync="page"
              @current-change="changePage"
            />
          </div>
          <div>
            <el-button type="primary" size="mini" @click="saveSelectInstance"
                       class="el-button-primary-style"
            >
              保 存
            </el-button>
            <el-button type="primary" size="mini" @click="cancelAndClose"
                       class="el-button-primary-style"
            >
              取 消
            </el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<!--{
        "id": "1731934043887324625",
        "createBy": "guest",
        "updateTime": "2023-12-05 18:12:42",
        "deleted": 0,
        "appId": "1730168489572823041",
        "appZhname": "我是谁3",
        "appName": "whoami",
        "appDescription": "暂无描述啊撒的哈苏哈搜方式哈哈负担就哈水力发电好啊乱收费啦好舒服好啊撒了交话费啦啥饭来哈",
        "host": "192.168.197.100:30010",
        "appVersion": "v1",
        "deployName": "whoami11114",
        "deployNamespace": "default",
        "mainPort": 8765,
        "dns": "whoami11114",
        "deployStatus": "NONE",
        "tenantId": 0,
        "createTime": null
      },-->
<script>
  import {getTenantId} from "@/utils/tenantId";

  export default {
    name: "SelectExistInstanceDialog",
    props: ["appName"],
    data() {
      return {
        showExistInstanceDialog: false,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0,
        },
        tmpPage: {
          pageSize: 10,
          pageNum: 1,
          filterKey: "",
        },
        selectedInstance: {},
        deployedInstanceByAppName: [],
      };
    },
    methods: {
      changePage(currentPage) {
        this.page.currentPage = currentPage;
        this.tmpPage.pageNum = currentPage;
      },
      select(selection, row) {
        this.$refs.multipleTable.clearSelection();
        this.selectedInstance = {};
        if (selection.length === 0) {
          return;
        }
        if (row) {
          this.selectedInstance = row;
          this.$refs.multipleTable.toggleRowSelection(row, true);
        }
      },
      getAllDeployedInstanceByAppName() {
        const param = {appName: this.appName, tenantId: getTenantId()};
        this.$appManageApi.listByNameAndVersion(param).then((res) => {
          if (res && res.code === 200) {
            this.deployedInstanceByAppName = res.data;
          }
        });
      },
      // selectionChange(val) {
      //   this.selectedInstance = val;
      // },
      // rowClick(row, column) {
      //   const selectData = this.selectedInstance;
      //   this.$refs.multipleTable.clearSelection();
      //   if (selectData.length === 1) {
      //     selectData.forEach(ele => {
      //       if (ele === row) {
      //         this.$refs.multipleTable.toggleRowSelection(row, false);
      //       } else {
      //         this.$refs.multipleTable.toggleRowSelection(row, true);
      //       }
      //     })
      //   } else {
      //     this.$refs.multipleTable.toggleRowSelection(row, true);
      //   }
      // },
      saveSelectInstance() {
        if (this.selectedInstance.id !== undefined) {
          this.$emit("addExistInstance", this.selectedInstance, "");
        }
      },
      cancelAndClose() {
        this.$refs.multipleTable.clearSelection();
        this.showExistInstanceDialog = false;
        this.$emit("addExistInstance", null, "cancel");
      },
    },
    mounted() {
    },
    beforeMount() {
      this.getAllDeployedInstanceByAppName();
    },
  };
</script>

<style scoped>
  ::v-deep .el-table__header-wrapper .el-checkbox {
    visibility: hidden;
  }
</style>

<style>
  .tooltipClass {
    width: 300px;
  }
</style>
